<template>
  <a-modal
    v-model:visible="modalVisible"
    @cancel="closeModal"
    width="600px"
    :top="100"
    :align-center="false"
    title="新增角色"
    @ok="handleSubmit"
  >
    <template #footer>
      <a-button @click="closeModal">取消</a-button>
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </template>
    <a-form
      :rules="rules"
      :auto-label-width="true"
      :model="form.list"
      ref="formRef"
    >
      <a-form-item
        field="roleName"
        label="角色名称:"
        :validate-trigger="['change', 'input', 'blur']"
        allow-clear
      >
        <a-input v-model="form.list.roleName" placeholder="请输入角色名称" />
      </a-form-item>
      <!-- :load-more="loadMore" -->
      <a-form-item field="parentRoleId" label="父级角色:" allow-clear>
        <a-cascader
          :field-names="fieldNames"
          :options="GetMenuData"
          v-model="form.list.parentRoleId"
          check-strictly
          :load-more="loadMore"
        />
      </a-form-item>
      <a-form-item field="isInheritChild" label="继承子级权限:">
        <a-switch
          v-model="form.list.isInheritChild"
          :checked-value="1"
          :unchecked-value="2"
        />
      </a-form-item>

      <a-form-item field="roleLevel" label="角色级别:">
        <a-radio-group
          v-model="form.list.roleLevel"
          placeholder="请选择角色级别"
        >
          <a-radio :value="1">超级管理员</a-radio>
          <a-radio :value="2">普通管理员</a-radio>
          <a-radio :value="3">普通人员</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item field="remark" label="备注:">
        <a-textarea v-model="form.list.remark" allow-clear />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { getRoleList } from '@/apis/roleManagement/index';
import { RoleList } from '@/apis/roleManagement/type';
import { cloneDeep } from 'lodash';
// import { TMenuAdd, RevampMenuAdd } from '~/apis/jurisdiction/type';
// import { XPrivilegeList, MenuAdd } from '~/apis/jurisdiction/index';
const emit = defineEmits(['update:visible', 'addRoleModel']);
const getTreeData = ref([]);
const envList: Array<string> = [];
for (const item in import.meta.env) {
  if (item.indexOf('VITE') === 0) {
    envList.push(item);
  }
}
const fieldNames = { value: 'id', label: 'roleName' };
const GetMenuData = ref([]);
const getRoleData = async () => {
  try {
    const res = await getRoleList({ parentRoleId: 0 });
    GetMenuData.value = res.roleList;
  } catch (err: unknown) {
    console.log(err);
  }
};

const props = withDefaults(
  //参数说明
  defineProps<{
    editCompanyForm: any; //修改的数据
    visible: boolean; //是否打开modal
  }>(),
  {
    visible: false
  }
);
// 控制确定取消按钮
const modalVisible = computed({
  //控制visible
  get() {
    return props.visible;
  },
  set() {
    return emit('update:visible', false);
  }
});

const form = reactive<any>({
  list: {
    roleName: '', //角色名称
    rolePermissionsLevel: null, //角色权限等级（数字越大级别越高,默认为1 ）
    parentRoleId: 0, //父级角色id
    isInheritChild: 2, //是否继承子级角色权限（1 是 2 否）
    isHidden: 2, //是否隐藏（1 是 2 否）
    canItDelete: 2, //是否可删除(1 是 2 否)
    isSysDefault: 1, //是否系统默认（1 是 2 否）
    roleLevel: 2, //角色级别（1 超级管理员 2 普通管理员 3 普通人员）
    roleType: 2, //是否开启权限检测（1 是 2 否）
    remark: '', //备注
    isLimitedTime: 2, //是否限时(1 是 2 否)
    expirationDate: null //失效日期
  }
});

// const loadMore = async (option: any, done) => {
//   const res = await getRoleList({ parentMenuId: option.id });
//   done(res.roleList);
// };

const rules = {
  roleName: [{ required: true, message: '请输入角色姓名' }],
  rolePermissionsLevel: [{ required: true, message: '请输入角色权限等级' }],
  roleLevel: [{ required: true, message: '请选择角色级别' }]
};

const loadMore = (option: any, done: any) => {
  window.setTimeout(async () => {
    const res = await getRoleList({ parentRoleId: option.id });
    await done(res.roleList);
  }, 1000);
};

//取消
const closeModal = () => {
  modalVisible.value = false;
  formRef.value.resetFields();
};
const formRef = ref();
const visible = ref(false);
const handleSubmit = async () => {
  //提交
  const check = await formRef.value.validate();
  if (!check) {
    if (!form.list.id) {
      emit('addRoleModel', cloneDeep(form.list), 'add');
    } else if (form.list.id) {
      emit('addRoleModel', cloneDeep(form.list), 'edit');
    }
    closeModal();
    visible.value = false;
  }
};

onMounted(() => {
  getRoleData();
  if (props.editCompanyForm.id) {
    form.list = props.editCompanyForm;
    console.log(form.list);
  }
});
</script>
